<template>
	<view>
		<view class="row j-sa border-bottom border-top px-3  font-weight-6" style="background-color:#FFFFFF;">
			<view class="px-1 py-2" @tap="activeTab(0)" :class="{active:active == 0}">全部</view>
			<view class="px-1 py-2" @tap="activeTab(1)" :class="{active:active == 1}">待付款</view>
			<view class="px-1 py-2" @tap="activeTab(2)" :class="{active:active == 2}">待体检</view>
			<view class="px-1 py-2" @tap="activeTab(3)" :class="{active:active == 3}">已体检</view>
		</view>
		<view v-if="flag">
			<view style="width:100%;margin: 50rpx 0 100rpx;text-align: center;">
				<image src="../../static/nocontent.png" mode="" style="width: 243rpx;height: 200rpx;"></image>
				<view style="color: #999;">
					暂无内容
				</view>
			</view>
		</view>
		<view v-if="!flag">
			<block v-for="(item,index) in orders" :key="index">
				<view class="pt-5 px-3" style="background-color:#FFFFFF;border-top: 20rpx solid #f6f6f6;">
					<view class="row a-center j-sb">
						<!-- <text class="font-md font-weight-6">谷雨颐嘉健康服务官方产品</text> -->
						<view class="mb-3">订单编号：{{item.ordernosub}}</view>
						<text class="font-sm main-text-color" v-if="item.state==1">待付款</text>
						<text class="font-sm main-text-color" v-else-if="item.state==2">待体检</text>
						<text class="font-sm main-text-color" v-else-if="item.state==3">已完成</text>
					</view>
					<view class="row" @tap="orderInfo(item.id)">
						<image style="width: 205upx;height: 145upx;"  :src="baseUrl+item.img"></image>
						<view class="ml-2">
							<view class="font-weight-6">{{item.title}}</view>
							<view class="row j-sb a-center" style="width: 460upx;">
								<text class="main-text-color font-sm">
									￥
									<text class="font-md">{{item.price}}</text>
								</text>
								<text style="color: #CCCCCC;">×{{item.pay_number}}</text>
							</view>
						</view>
					</view>
					<view class="row py-2" @tap="orderInfo(item.id)">
						<text class="font-weight-6">体检包含项目：</text>
						<view class="agreement">
							<view v-for="(items,indexs) in item.medical_items" :key="indexs" class="agr-item">
								<view class="item-left">
									<view class="item-title">
										<view>{{items.medical_items_attrname}}-{{items.medical_items_attrval}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view v-if="item.sub==1">
						<view class="row" @tap="orderInfo(item.id)">
							<image style="width: 205upx;height: 145upx;"  :src="baseUrl+item.img"></image>
							<view class="ml-2">
								<view class="font-weight-6">{{item.title}}</view>
								<view class="row j-sb a-center" style="width: 460upx;">
									<text class="main-text-color font-sm">
										￥
										<text class="font-md">{{item.price}}</text>
									</text>
									<text style="color: #CCCCCC;">×{{item.pay_number}}</text>
								</view>
							</view>
						</view>
						<view class="row py-2" @tap="orderInfo(item.id)">
							<text class="font-weight-6">体检包含项目：</text>
							<view class="pl-5">
								<block v-for="(items,indexs) in item.medical_items" :key="indexs">
									<view>{{items.medical_items_attrname}}-{{items.medical_items_attrval}}</view>
								</block>
							</view>
						</view>
					</view>
					<view v-else-if="item.sub==2">
						<block v-for="(itemsub,indexsub) in item.subs" :key="indexsub">
							<view class="row" @tap="orderInfo(item.id)">
								<image style="width: 205upx;height: 145upx;"  :src="baseUrl+itemsub.img"></image>
								<view class="ml-2">
									<view class="font-weight-6">{{itemsub.title}}</view>
									<view class="row j-sb a-center" style="width: 460upx;">
										<text class="main-text-color font-sm">
											￥
											<text class="font-md">{{itemsub.price}}</text>
										</text>
										<text style="color: #CCCCCC;">×{{itemsub.pay_number}}</text>
									</view>
								</view>
							</view>
							<view class="row py-2" @tap="orderInfo(item.id)">
								<text class="font-weight-6">体检包含项目：</text>
								<view class="pl-5">
									<block v-for="(itemss,indexss) in itemsub.medical_items" :key="indexss">
										<view>{{itemss.medical_items_attrname}}-{{itemss.medical_items_attrval}}</view>
									</block>
								</view>
							</view>
						</block>
					</view> -->
					<view class="border-top row py-2 a-center j-sb">
						<text class="main-text-color font-md">合计 ： ¥{{item.pay_fee}}</text>
						<view class="row">
							<view @tap.stop="orderInfo(item.id)" class="btn" style="border-radius:30upx;border: 1px solid #f6f6f6;margin-right: 40rpx;">详情</view>
							<view v-if="item.state==1" @tap="cancel(item.id,index)" type=""  class="btn" style="border-radius:30upx;border: 1px solid #f6f6f6;">取消</view>
							<view v-if="item.state==1" type="" @tap="topay(item.id,index)" class="btn"  style="border-radius:30upx;background-color: #ff6101;color: #FFFFFF;margin-left: 40rpx;">付款</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	import jweixin from '@/common/lib/jweixin.js'//1.6.0
	export default {
		data() {
			return {
				page:1,
				baseUrl:request.common.baseUrl,
				active:0,
				orders:[],
				flag: false
			};
		},
		onLoad:function(option){
			this.active=option.state
			uni.request({
				url: request.common.baseUrl+'/api/order/myOrders',
				data: {
				    token:uni.getStorageSync('keyToken'),
					page:this.page,
					state:this.active
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					console.log(res)
					if(res.data.code==200){
						this.orders=res.data.data
					}
				}
			});
		},
		methods: {
			activeTab(v){
				this.active = v;
				this.page=1;
				uni.request({
				    url: request.common.baseUrl+'/api/order/myOrders',
				    data: {
				    	token:uni.getStorageSync('keyToken'),
				    	page:this.page,
				    	state:this.active
				    },
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
						this.orders=[]
				        if(res.data.code==200){
							this.orders=res.data.data
						}
						if(this.orders.length == 0){
							this.flag = true
						}else {
							this.flag = false
						}
				    }
				});
			},
			orderInfo(id){
				uni.navigateTo({
					url:'/pages/orderinfo/orderinfo?id='+id
				})
			},
			cancel(id,index){
				uni.request({
					url: request.common.baseUrl+'/api/order/cancel',
					data: {
				    	token:uni.getStorageSync('keyToken'),
						id:id
					},
					header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if(res.data.code==200){
							this.orders.splice(index, 1)
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			},
			topay(id,index){
				uni.request({
				    url: request.common.baseUrl+'/api/order/wtopay',
				    data: {
						token:uni.getStorageSync('keyToken'),
						openid:uni.getStorageSync('keyOpenid'),
						id:id
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							WeixinJSBridge.invoke(
								'getBrandWCPayRequest', {
									"appId": res.data.data.appId, //公众号名称，由商户传入
									"timeStamp":res.data.data.timeStamp, //时间戳     
									"nonceStr":res.data.data.nonceStr, //随机串     
									"package": res.data.data.package,
									"signType":res.data.data.signType, //微信签名方式：     
									"paySign":res.data.data.paySign //微信签名 
								},
								function(ress) {
									if (ress.err_msg == "get_brand_wcpay_request:ok") {
										uni.showToast({
											icon: 'nnoe',
											title: '支付成功'
										})
										setTimeout(() => {
											this.page=1
											this.active=2
										}, 500);
									} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
										uni.showToast({
											icon: "none",
											title: "已取消支付"
										})
									} else {
										uni.showToast({
											icon: "none",
											title: "支付失败"
										})
									}
								}
							);
							// jweixin.chooseWXPay({
							// 	appId: res.data.data.appId,
							// 	nonceStr: res.data.data.nonceStr,
							// 	timestamp: res.data.data.timeStamp,
							// 	package: res.data.data.package,
							// 	signType: res.data.data.signType,
							// 	paySign: res.data.data.paySign,
							// 	success: () => {
							// 		// this.orders.splice(index, 1)
							// 		this.page=1
							// 		this.active=2
							// 	},
							// 	fail: err => {
							// 		// 支付失败
							// 	},
							// 	cancel: err => {
							// 		// 支付取消
							// 	}
							// });
						}
				    }
				});
			}
		},
		onShow:function(){
			uni.request({
				url: request.common.baseUrl+'/api/order/myOrders',
				data: {
				    token:uni.getStorageSync('keyToken'),
					page:this.page,
					state:this.active
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					this.orders=[]
					if(res.data.code==200){
						this.orders=res.data.data
					}
					if(this.orders.length == 0){
						this.flag = true
					}else {
						this.flag = false
					}
				}
			});
		},
		onReachBottom:function(){
			this.page=this.page+1
			uni.request({
				url: request.common.baseUrl+'/api/order/myOrders',
				data: {
				    token:uni.getStorageSync('keyToken'),
					page:this.page,
					state:this.active
				},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						for (var j = 0; j < res.data.data.length; j++) {
							this.orders.push(res.data.data[j])
						}
					}else{
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
		}
	};
</script>

<style lang="less" scoped>
	.active{
		border-bottom: 2px solid #ff6101;
		color: #ff6101;
	}
	.btn {
		width: 120rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}
	.agreement {
		width: 100%;
		background-color: #f7fcf4;
		.agr-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx 40rpx 25rpx 20rpx;
			border-bottom: 1px dashed #e3e3e3;
			.item-left{
				display: flex;
				align-items: center;
				.item-title{
					margin-left: 20rpx;
					font-size: 28rpx;
					color: #333;
				}
				.item-desc{
					color: #FFFFFF;
					.desc-nfinsh {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						border-radius: 50%;
						background-color: #52c41a;
						font-size: 10px;
					}
					.desc-finsh {
						width: 44rpx;
						height: 44rpx;
						text-align: center;
						line-height: 44rpx;
						border-radius: 50%;
						background-color: #ff6f27;
						font-size:10px;
					}
				}
			}
			.item-time {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				image {
					width: 12rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>
